<script setup lang="ts">
import {ref, onMounted, defineAsyncComponent} from 'vue';
import { useRoute } from 'vue-router';
import { contentInfo, contentInfoType, logRecord } from "@/api/content";
import { CtaType } from "@/api/cta";
import {initWechat} from "@/utils/wechat.ts";


const omniUserUuid = localStorage.getItem('omni_user_uuid') as string;

const ctaType = ref<CtaType>('');
const ctaUuid = ref<string>("");

const route = useRoute();
const contentUuid = route.params.contentUuid as string;
const aggListUuid = route.params.aggListUuid as string;
const pushId = route.query.pushId as string;
const CTA = defineAsyncComponent(() => import("@/views/components/cta/Cta.vue"))

const dataInfo = ref<contentInfoType>({
  uuid: "",
  name: "",
  type: "",
  thumb: "",
  content: "",
  material_uuid: "",
  created_at: "",
  download: {
    button_name: "",
    type: "",
    image_thumb: "",
    image_material_uuid: "",
    file_thumb: "",
    file_material_uuid: "",
    file_name: "",
    file_pre_size: "",
    file_size: "",
    link_url: "",
    link_content: "",
    cta_info: ["form",""]
  }
});

onMounted(() => {
  getContentInfo();
  logRecordAction("content_view");
});

const getContentInfo = async () => {
  try {
    const response = await contentInfo(contentUuid);
    if (response.data) {
      dataInfo.value = response.data;
      const cta_info = response.data.download.cta_info;
      if (cta_info.length > 1) {
        ctaType.value = cta_info[0];
        ctaUuid.value = cta_info[1];
      }
      if(dataInfo.value){
        await initWechat(dataInfo.value.name, dataInfo.value.content, dataInfo.value.thumb)
      }
    }
  } catch (error) {
    console.error('获取内容信息时出错:', error);
  }
};

const logRecordAction = async (action_code: string) => {
  try {
    await logRecord({
      omni_user_uuid: omniUserUuid,
      action_code,
      entity_id: contentUuid,
      extra_data: {
        content_uuid: contentUuid,
        agg_uuid: aggListUuid
      },
      push_uuid:pushId
    });
  } catch (error) {
    console.error('记录日志时出错:', error);
  }
};


</script>

<template>
  <div>
    <div v-if="dataInfo.uuid" class="overflow-y-auto h-full pb-16">
      <div class="w-full">
        <van-image
            width="100vw"
            height="50vw"
            :src="dataInfo.thumb"
            fit="cover">
          <template #error>
            <div class="bg-gray-400" style="height: 50vw;width: 100vw"></div>
          </template>
        </van-image>
      </div>

      <div class="p-2">
        <div class="mb-3 text-2xl font-bold">{{ dataInfo.name }}</div>
        <div class="flex items-center">
          <van-icon class="mr-2" size="18" color="#666666" name="clock-o" />
          <span class="text-sm leading-6" style="color: #666666">{{ dataInfo.created_at }}</span>
        </div>
      </div>

      <div class="bg-white p-3 flex flex-col">
        <div class="pt-1 text-sm leading-7" style="color: #666666;text-indent: 1em;">
          <div style="white-space: pre-wrap;">{{ dataInfo.content }}</div>
        </div>
      </div>

    </div>
    <CTA v-if="ctaUuid"
        :omniUserUuid="omniUserUuid"
        :ctaType="ctaType"
        :downloadType="dataInfo.download.type"
        :downloadLink="dataInfo.download.link_url"
        :fileName="dataInfo.name"
        :ctaUuid="ctaUuid"
        sceneType="content"
        :sceneUuid="contentUuid"
    />
  </div>
</template>


<style scoped></style>
